<template>
  <div class="media_news">
    <van-nav-bar
        v-if="$store.state.device !== 'APP'"
        title="博主评论回复"
        left-text="返回"
        left-arrow
        @click-left="$router.go(-1)"/>
    <div :class="$store.state.device !== 'APP'?'news_tab_list' : 'news_tab_list app_nav'">
      <van-list
          v-model="loading"
          :finished="finished"
          @load="onLoad">
        <a :href="'/media-detail?id=' + item.postId" v-for="(item, index) in dataList" :key="item.commentPostId + ' ' + index" class="new_item">
          <p class="time_text">{{item.expireData}}</p>
          <div class="bg_body">
            <div class="title_name">{{item.title}}</div>
            <div class="user_rutern">
              <div class="top_img">
                <div class="left_img_text">
                  <img v-if="item.isV === 2" class="v_img" src="../../../assets/img/modules/media/icon_v2_2.png" alt="">
                  <img :src="item.avatar?item.avatar:'http://m.oucgz.cn/icon_v2_3.png'" alt="">
                  <div class="name_text">
                    <p>{{item.userNickName}} <span>回复:</span></p>
                  </div>
                </div>
              </div>
              <div class="personal_text">
                {{item.comment}}
              </div>
            </div>
          </div>
        </a>
        <!--加载状态-->
        <van-skeleton
            title
            style="margin-top: 30px"
            avatar
            :row="4"
            :loading="loading">
        </van-skeleton>
      </van-list>
      <div v-if="footerShow" class="no_data_title" style="background-color: transparent;">
        <p style="color: #999999">没有内容了~</p>
      </div>
    </div>
  </div>
</template>
<script>
import debounce from 'lodash/debounce'
export default {
  name: 'media_news',
  components: {
  },
  data () {
    return {
      loading: false, // 上拉加载
      finished: false, // 上拉加载
      footerShow: false, // 底部标志显示
      current: 1, // 当前页
      dataList: [], // 数据
      size: 8 // 每页条数
    }
  },
  props: {},
  watch: {
  },
  methods: {
    /*
     *@author wf_Huang
     *@Time 2019/8/12 0012 18:00
     *@function  上拉刷新 加载
     *****************************************/
    onLoad: debounce(function () {
      this.getDataList()
      this.current = this.current + 1
    }, 100, { 'leading': true, 'trailing': false }),
    /* wf_Huang 2019/9/17 0017 获取数据 */
    getDataList () {
      this.$http({
        url: `${window.SITE_CONFIG['mediaURL']}/wpcomments/getCommentsByUser?current=${this.current}&size=${this.size}&openId=${this.$store.state.openid}`,
        method: 'get',
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.code !== 200) {
          this.$toast('消息列表~')
          this.loading = false
          return false
        }
        if (res.data.length < this.size) {
          this.footerShow = true
          this.finished = true
        } else {
          this.footerShow = false
        }
        res.data.forEach(item => {
          this.dataList.push(item)
        })
        this.loading = false
      }).catch(() => {})
    }
  },
  computed: {},
  created () {
  },
  mounted () {
    document.querySelector('body').setAttribute('style', 'background-color:#F6F6F6')
  },
  destroyed () {
    document.querySelector('body').removeAttribute('style')
  }
}
</script>
<style lang="scss" scoped>
  .media_news {
    .nav_top_list{
      z-index: 99;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 32px;
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      background-color: #ffffff;
      box-shadow: 0 2px 12px 0 rgba(153, 153, 153, 0.14);
      .left_btn{
        color: #999999;
        font-size: 32px;
        margin-right: 130px;
      }
      span{
        font-size: 32px;
        color: #181818;
        font-weight: bold;
      }
      .btn_right{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        a{
          height: 100%;
          display: flex;
          padding: 0 10px;
          position: relative;
          &:nth-child(1){
            img{
              width: 36px;
              height: 34px;
            }
          }
          &:nth-child(2){
            img{
              width: 34px;
              height: 34px;
            }
          }
          &:nth-child(3){
            img{
              width: 34px;
              height: 34px;
            }
          }
          .active{
            width: 18px;
            height: 18px;
            position: absolute;
            right: 5px;
            top: 1px;
          }
        }
      }
    }
    .news_tab_list{
      padding: 31px;
      .new_item{
        margin-bottom: 60px;
        display: block;
        .time_text{
          font-size:24px;
          text-align: center;
          color:rgba(153,153,153,1);
        }
        .bg_body{
          background-color: #ffffff;
          padding: 28px;
          .title_name{
            font-size:30px;
            color:rgba(34,34,34,1);
            margin-bottom: 30px;
          }
          .user_rutern{
            .top_img{
              display: flex;
              font-size: 32px;
              color: #222222;
              align-items: center;
              margin-bottom: 20px;
              justify-content: space-between;
              .left_img_text{
                display: flex;
                align-items: center;
                position: relative;
                img{
                  width: 50px;
                  height: 50px;
                  border-radius: 50px;
                  box-shadow: 0 0 5px rgba(0,0,0,0.1);
                  margin-right: 20px;
                }
                .v_img{
                  position: absolute;
                  width: 26px;
                  height: 26px;
                  top: 25px;
                  left: 25px;
                }
                .name_text{
                  p{
                    font-size: 28px;
                    color: #222222;
                    margin: 0;
                  }
                  span{
                    font-size: 24px;
                    color: #999999;
                    margin: 0;
                  }
                }
              }
              button{
                background: #027FFE;
                border-radius: 4px;
                font-size: 24px;
                color: #FFFFFF;
                width: 120px;
                height: 54px;
                border: 0;
                display: block;
                float: right;
              }
              .active{
                background: #EEEEEE;
                color: #222222;
              }
            }
            .personal_text{
              padding-left: 70px;
              font-size:28px;
              color: #999999;
            }
          }
        }
      }
    }
  }
</style>
